<template>
	<view :class="shadeshow?'hidden':''" class="bg_fff">
		<form>
			<view class="cu-form-group ">
				<view class="title">农场名称</view>
				<picker @change="PickerChange1" range-key="nc_mc" :value="sel1"  :range="ncpicker">
					<view class="picker">
						{{sel1>-1&&ncpicker[sel1].nc_mc?ncpicker[sel1].nc_mc:'请选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">管理区名称</view>
				<picker @change="PickerChange2" range-key="glq_mc" :value="sel2"  :range="glqpicker">
					<view class="picker" v-if="glqpicker.length>0">
						{{sel2>-1&&glqpicker[sel2].glq_mc?glqpicker[sel2].glq_mc:'请先选择农场名称'}}
					</view>
				</picker>
				<view v-if='glqpicker.length==0' class="deftxt">请先选择农场名称</view>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">地块名称</view>
				<picker @change="PickerChange3" range-key="dk_mc" :value="sel3" :range="dkpicker">
					<view class="picker" v-if="dkpicker.length>0">
						{{sel3>-1&&dkpicker[sel3].dk_mc?dkpicker[sel3].dk_mc:'请先选择管理区名称'}}
					</view>
				</picker>
				<view v-if='dkpicker.length==0' class="deftxt">请先选择管理区名称</view>
			</view>
			<view class="cu-form-group margin-top">
				<view class="title">视频</view>
				<picker @change="PickerChange4" range-key="sp_mc" ind=4 :range="sppicker">
					<view class="picker" v-if="sppicker.length>0">
						{{sel4>-1?sppicker[sel4].sp_mc:'请先选择地块名称'}}
					</view>
				</picker>
				<view v-if='sppicker.length==0' class="deftxt">请先选择地块名称</view>
			</view>
			<view class="padding">
				<view class="padding flex">
					<button class="flex-sub cu-btn block bg-blue margin-sm lg" @tap="getvideo">查询</button>
					<button class="flex-sub cu-btn block bg-blue margin-sm lg" @tap="clearsle()">重置</button>
				</view>
			</view>
		</form>
		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-titles text-blue"></text>视频列表
			</view>
		</view>
		<scroll-view  scroll-y class="bg-white nav scroll-view-item_H">
			<view class="bg-white padding">
				<view class="grid col-2 grid-square">
					<view class="bg-img textimg sp_bg" @click="openvideo(item.sp_dz)" v-for="(item,index) in videolist" :key="index" >
						<view class="imgtext"><view>{{item.sp_mc}}</view></view>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class='shade' v-if='shadeshow'>
			<scroll-view scroll-y class='scroll-view-item_H' @touchmove.stop.prevent>
				<view class="close" @click="close">×</view>
				<video id="myVideo" :src='videourl' enable-danmu  controls></video>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	import {getncxxlist,getglqxxlist,getdkxxlist,getspxxlist} from '../api/api.js'
	export default {
		data() {
			return {
				sel1: -1,
				sel2: -1,
				sel3: -1,
				sel4: -1,
				ncpicker:[],
				glqpicker:[],
				dkpicker:[],
				sppicker:[],
				videolist:[],
				shadeshow:false	,
				videourl:''
				};
			},
			onShow(){
				let _this=this;
				getncxxlist(      //农场数据
					function(res){
						_this.ncpicker=res.data.returnData.ncxxlb;
					}
				)
			},
			methods: {
					setselback(){
					
						this.sel2= -1;
						this.sel3= -1;
						this.sel4= -1;
						this.glqpicker=[]
						this.dkpicker=[]
						this.sppicker=[]
					},
					PickerChange1(e) {
						let _this=this
						if(e.detail.value==-1 ) e.detail.value=0
						this.sel1 = e.detail.value;
						this.setselback();
					    let parm ={
							cx_ssnc:this.ncpicker[this.sel1].nc_bh
						} 
						getglqxxlist(      //管理区数据
							parm,
							function(res){
								_this.glqpicker=res.data.returnData.glqxxlb||[];	
							}
						)
					},
					PickerChange2(e) {
						let _this=this
						if(e.detail.value==-1 ) e.detail.value=0
						this.sel2 = e.detail.value;
						
						let parm={cx_ssjd:this.glqpicker[this.sel2].glq_bh}
						getdkxxlist(parm,
						function (res) {
							_this.dkpicker=res.data.returnData.dkxxlb||[]
						}
						)
					},
					PickerChange3(e) {
						if(e.detail.value==-1 ) e.detail.value=0
						this.sel3 = e.detail.value
						
						let parm={
							cx_ssnc:this.ncpicker[this.sel1].nc_bh,
							cx_ssjd:this.glqpicker[this.sel2].glq_bh,
							cx_dkmc:this.dkpicker[this.sel3].dk_bh,
							cx_spbh:''
							}
						getspxxlist(parm,
						res => {
							console.log(res)
							this.sppicker=res.data.returnData.spxxlb||[]
						}
						)
					},
					PickerChange4(e) {
						if(e.detail.value==-1 ) e.detail.value=0
						this.sel4 = e.detail.value
					},
					getvideo(){
						let parm={
							cx_ssnc:this.ncpicker[this.sel1]?this.ncpicker[this.sel1].nc_bh:'',
							cx_ssjd:this.glqpicker[this.sel2]?this.glqpicker[this.sel2].glq_bh:'',
							cx_dkmc:this.dkpicker[this.sel3]?this.dkpicker[this.sel3].dk_bh:'',
							cx_spbh:this.sppicker[this.sel4]?this.sppicker[this.sel4].sp_bh:''
							}
						getspxxlist(parm,
						res => {
							this.videolist=res.data.returnData.spxxlb||[]
						})
					},
					openurl(url) {
						uni.navigateTo({
							url: url
						});
					},
					clearsle(){
						this.sel1= -1,
						this.sel2= -1,
						this.sel3= -1,
						this.sel4= -1
					},
					openvideo(data){
						/* uni.navigateTo({
							url: 'videoplay?'+data
						}); */
						this.shadeshow=true;
						console.log(data)
						this.videourl=data 
					},
					close(){
						this.shadeshow=false;
						this.videourl=''
					}
			}
		}
</script>
<style>
	@import "../../colorui/main.css";
	@import "../../colorui/icon.css"; 
	.scroll-view-item_H{
          max-height: 1200upx;
	}
	.shade{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0 ,0  , 0.9);
		display: flex;
		align-content: center;
	}
	#myVideo{
		width: 100%;
		margin-top: 200upx;
		height: 700upx
	}
	.close{
		font-size: 100upx;
		color: #fff;
		position: absolute;
		top: 50upx;
		right: 50upx;
		}
	.sp_bg{
		background: #333333 url(../../static/img/videobg.png) center center no-repeat;
		background-size: 80upx 60upx !important;
	}	
</style>
